<template>
    <div class="container">
        <headerView :headerTitle="headerTitle" class="header" />
        <div class="container-content">
            <div class="content">
                <div class="content-item" v-for="(item, index) in familyMemberTab" :key="index"
                    @click.prevent="userDetail(item.id)">
                    <div class="content-item-img"><img :src="item.headImag" alt="头像"></div>
                    <div class="content-item-info">
                        <div class="item-name">
                            <p>{{ item.userName }}</p>
                        </div>
                        <div class="item-role">
                            <p class="role" :ref="setElement">{{ item.role }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="FamilyMember">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import headerView from '@/components/Header/backHeader.vue';
import service from '@/utils/request';
const router = useRouter();
const headerTitle = ref({
    title: '家庭成员',
});
const boxRefs = ref([])
const setElement = (el) => {
    if (el) {
        boxRefs.value.push(el)
    }
}
const familyMemberTab = ref([]);
const inteTable = () => {
    service({
        url: 'api/Users',
        method: 'get',
    }).then((res) => {
        if (res != undefined) {
            Array.from(res.data).forEach((item) => {
                familyMemberTab.value.push({ id: item.id, headImag: item.headImag, userName: item.userName, role: item.role });
            });
        }
    });
};
/// 封装用户详情页，通过路由跳转后进入用户详情页，在用户详情页中，可以看到用户信息，但不能修改用户信息，可以点击用户头像放大查看用户头像
const userDetail = (id) => {
    router.push({
        name: 'UserDetail',
        params: { id: id },
    })
};
const setStyle = () => {
    Array.from(boxRefs.value).forEach((item) => {
        if (item.innerHTML == '户主') {
            item.style.backgroundColor = '#f56c6c';
            item.style.borderRadius = '2px';
        }
    })
}
onMounted(() => {
    inteTable();
    setStyle();
});
</script>

<style scoped>
.container {
    widows: 100vw;
    height: 100%;
}

.header {
    width: 100vw;
    height: 60px;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: 0px 0px 10px 5px #f0ecec;
}

.container-content {
    width: 100%;
    height: calc(100vh - 75px);
    margin-top: 75px;
}

.content {
    width: 90%;
    height: auto;
    margin: 0 auto;
}

.content-item {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-item-img {
    width: 40px;
    height: 40px;
}

.content-item-img img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
}

.content-item-info {
    width: 85%;
    height: 100%;
    border-bottom: #f0ecec 1px solid;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.item-role {
    width: 32px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 13px;
    color: #444;
    /* background-color: #f0ecec; */
    background-color: #95d475;
    border-radius: 2px;
}
</style>